import React from 'react';

//声明函数
// const NewCard = (props)=>{
//     const {name, number, isHuman, tags} = props
//     console.log(props)
//     return(
//         <div className="alert alert-success">
//             <h4 className="alert-heading">{name}</h4>
//             <ul>
//                 <li>电话：{number}</li>
//                 <li>{isHuman ? '外星生物' : '人类'}</li>
//                 <hr/>
//                 <p>
//                     {
//                         tags.map((item,index)=>(
//                             <span key={index} className="badge badge-pill badge-primary">{item}</span>
//     ))

//                     }
//                 </p>
//             </ul>
//         </div>
//     )
// }

//类的方式
class NewCard extends React.Component{
    render(){
        const {name, number, isHuman, tags} = this.props
        console.log(this.props)
        return(
            <div className="alert alert-success">
                <h4 className="alert-heading">{name}</h4>
                <ul>
                    <li>电话：{number}</li>
                    <li>{isHuman ? '外星生物' : '人类'}</li>
                    <hr/>
                    <p>
                        {
                            tags.map((item,index)=>(
                                <span key={index} className="badge badge-pill badge-primary">{item}</span>
        ))
                        }
                    </p>
                </ul>
            </div>
        )

    }
}

export default NewCard